import React,{ useEffect, useState } from 'react';

import { Toast } from 'antd-mobile';

/**
 * 历史收货人方式身份验证
 * @param {*} props 
 * @returns 
 */
function CustInt (props){

    const { 
        name='', intValue, setValue, placeholder, icon, type = 'text',
        doChange, doFocus, maxLen, doValid, desc, currentName = ''
    } = props;

    const [ isError, setIsError ] = useState(false);
    
    useEffect(() => {}, [ intValue, isError ]);
    

    const onFocus = (e) => {
        doFocus(e);
    }

    const onBlur = e => {
        if(doValid && !doValid(e.target.value)) {
            Toast.show({ content: desc });
            setIsError(true);
        } else {
            setIsError(false)
        }
    }

    const onChange = e => {
        doChange(e);
        if(doValid && !doValid(e.target.value)) {
            setIsError(true);
        } else {
            setIsError(false)
        }
    }

    return (
        <div data-v2310001='' className='w-int-box'>
            <div className={`w-int-body${isError ? ' w-error' : ''}`}>
                <i className='w-label-icon' children={icon}/>
                <input type={type} data-v2310001='' name={name} maxLength={maxLen} value={intValue}
                    className='w-int-inner' placeholder={placeholder} autoComplete='off'
                    onBlur={(e) => onBlur(e)} onFocus={(e) => onFocus(e)} onChange={(e)=> onChange(e) }
                />
                { 
                    name !== '' && name === currentName ? (
                        <i data-v2310001='' className='w-int-clear' onClick={() => setValue('')}/>
                    ) : null 
                }
            </div>
        </div>
    )
}
export default CustInt;